import React, { useEffect } from 'react'
import { useSelector, useDispatch } from "umi"
import { Form, Input, Select } from "antd";
import { createOption } from '@/utils/selectOption';
import { mapData } from '@/utils/mapData';
import DrowPover from "@/components/DropPopover";

export default function index({ reload }) {
    const [form] = Form.useForm();
    const { isClearForm } = useSelector(state => state.common)
    const { user: { identity } } = useSelector(state => state.user);
    const getNewValue = async (Item) => {
        const name = Item.itemName + 'Name';
        console.log(Item.itemName)
        await form.setFieldsValue({
            [Item.itemName]: Item._id,
            [name]: Item[name]
        });
        onSubmitNewValue();
    }

    const onSubmitNewValue = async () => {
        let res = await form.getFieldsValue();
        const key = Object.keys(res);
        delete res.departmentName;
        delete res.levelName;
        for (const item of key) {
            console.log(item)
            if (!res[item]) {
                delete res[item];
            }
        }
        reload(res)
    }
    const dispatch = useDispatch();

    useEffect(() => {
        if (isClearForm) {
            form.resetFields();
            reload({});
            dispatch({
                type: "common/setIsClearForm",
                payload: false
            })
        }
    }, [isClearForm])


    return (
        <Form layout='vertical' form={form}>
            <Form.Item label="姓名" name="userName">
                <Input placeholder='请输入搜索的员工姓名' onPressEnter={onSubmitNewValue} />
            </Form.Item>
            <Form.Item style={{ display: 'none' }} label="部门" name="department"></Form.Item>
            <Form.Item style={{ display: 'none' }} label="部门" name="level"></Form.Item>
            <Form.Item label="部门" name="departmentName">
                <Input
                    readOnly
                    placeholder={"请输入要搜索的员工部门"}
                    onChange={onSubmitNewValue}
                    addonAfter={<DrowPover
                        placeValue={"请选择部门"}
                        searchType={"departmentName"}
                        getnewValue={getNewValue}
                        interfaced={"getDepartmentList"}></DrowPover>}
                />
            </Form.Item>
            <Form.Item label="职级" name="levelName">
                <Input
                    readOnly
                    placeholder={"请输入搜索的员工职级"}
                    onChange={onSubmitNewValue}
                    addonAfter={<DrowPover
                        placeValue={"请选择职级"}
                        searchType={"levelName"}
                        getnewValue={getNewValue}
                        interfaced={"getLevelList"}></DrowPover>}
                />
            </Form.Item>
            {identity === 1 && (
                <>
                    <Form.Item label="婚姻状况" name="marriage">
                        <Select placeholder="根据婚姻状况对员工进行搜索" options={createOption(mapData["marriage"])} onChange={onSubmitNewValue}></Select>
                    </Form.Item>
                    <Form.Item label="学历" name="education">
                        <Select placeholder="根据学历进行员工搜索" options={createOption(mapData["education"])} onChange={onSubmitNewValue}></Select>
                    </Form.Item>
                </>
            )}
        </Form>
    )
}
